<!DOCTYPE html>



  


<html class="theme-next gemini use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/blogs/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/blogs/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/blogs/css/main.css?v=5.1.3" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/blogs/images/apple-touch-icon.png?v=5.1.3">


  <link rel="icon" type="image/png" sizes="32x32" href="/blogs/images/favicon-32x32.png?v=5.1.3">


  <link rel="icon" type="image/png" sizes="16x16" href="/blogs/images/favicon-16x16.png?v=5.1.3">


  <link rel="mask-icon" href="/blogs/images/logo.svg?v=5.1.3" color="#222">





  <meta name="keywords" content="Hexo, NexT" />










<meta property="og:type" content="website">
<meta property="og:title" content="Chao&#39;s blog">
<meta property="og:url" content="https://louchaoyy.gitee.io/blogs/page/2/index.html">
<meta property="og:site_name" content="Chao&#39;s blog">
<meta property="og:locale">
<meta property="article:author" content="Chaoyxy">
<meta name="twitter:card" content="summary">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '',
    scheme: 'Gemini',
    version: '5.1.3',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":true,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://louchaoyy.gitee.io/blogs/page/2/"/>





  <title>Chao's blog</title>
  








<meta name="generator" content="Hexo 5.4.0"></head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left 
  page-home">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/blogs/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Chao's blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/blogs/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-question-circle"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/blogs/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-question-circle"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/blogs/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-question-circle"></i> <br />
            
            标签
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            
  <section id="posts" class="posts-expand">
    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/06/23/Websocket%E5%89%8D%E5%90%8E%E7%AB%AF%E9%80%9A%E4%BF%A1/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/06/23/Websocket%E5%89%8D%E5%90%8E%E7%AB%AF%E9%80%9A%E4%BF%A1/" itemprop="url">Websocket前后端通信</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-06-23T21:59:26+08:00">
                2022-06-23
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/06/23/Websocket%E5%89%8D%E5%90%8E%E7%AB%AF%E9%80%9A%E4%BF%A1/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/06/23/Websocket前后端通信/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h1 id="WebSocket"><a href="#WebSocket" class="headerlink" title="WebSocket"></a>WebSocket</h1><h2 id="WebSocket简介"><a href="#WebSocket简介" class="headerlink" title="WebSocket简介"></a>WebSocket简介</h2><p>本文读者将从下面几个方面介绍：</p>
<ul>
<li><p>WebSocket是什么？</p>
</li>
<li><p>有什么用？</p>
</li>
<li><p>为什么要用WebSocket?</p>
</li>
</ul>
<h2 id="1-WebSocket是什么？"><a href="#1-WebSocket是什么？" class="headerlink" title="1. WebSocket是什么？"></a>1. WebSocket是什么？</h2><ul>
<li>WebSocket是HTML5下一种新的协议（WebSocket协议本质上是一个基于TCP的协议）</li>
<li>它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的</li>
<li>WebSocket是一个<strong>持久化</strong>的协议</li>
</ul>
<h2 id="2-WebSocket原理"><a href="#2-WebSocket原理" class="headerlink" title="2. WebSocket原理"></a>2. WebSocket原理</h2><ul>
<li>WebSocket约定了一个通信的规范，通过一个握手的机制，客户端和服务器之间能建立一个类似TCP的连接，从而方便它们之间的通信</li>
<li>在WebSocket出现之前，web交互一般是基于http协议的短连接或者长连接</li>
<li>WebSocket是一种全新的协议，不属于http无状态协议，协议名为”ws”</li>
</ul>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blogs/2022/06/23/Websocket%E5%89%8D%E5%90%8E%E7%AB%AF%E9%80%9A%E4%BF%A1/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/06/20/NodeJS%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E4%B8%8E%E4%B8%8B%E8%BD%BD/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/06/20/NodeJS%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E4%B8%8E%E4%B8%8B%E8%BD%BD/" itemprop="url">NodeJS文件上传与下载</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-06-20T19:51:01+08:00">
                2022-06-20
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/06/20/NodeJS%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E4%B8%8E%E4%B8%8B%E8%BD%BD/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/06/20/NodeJS文件上传与下载/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h1 id="文件上传与下载"><a href="#文件上传与下载" class="headerlink" title="文件上传与下载"></a>文件上传与下载</h1><h2 id="1-NodeJS遍历某文件夹下的所有文件"><a href="#1-NodeJS遍历某文件夹下的所有文件" class="headerlink" title="1.NodeJS遍历某文件夹下的所有文件"></a>1.NodeJS遍历某文件夹下的所有文件</h2><p>nodejs提供了一个方法用于遍历文件夹下的所有文件，返回一个数组</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getfiles</span>(<span class="params">path</span>)</span>&#123;    <span class="comment">//读取目录下所有目录文件  返回数组</span></span><br><span class="line">    <span class="keyword">return</span> fs.readdirSync(path,&#123;<span class="attr">encoding</span>:<span class="string">&#x27;utf8&#x27;</span>, <span class="attr">withFileTypes</span>:<span class="literal">true</span>&#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isFile</span>(<span class="params">filepath</span>)</span>&#123;  <span class="comment">//判断是否是文件 Boolean</span></span><br><span class="line">    <span class="keyword">let</span> stat = fs.statSync(filepath)</span><br><span class="line">    <span class="keyword">return</span> stat.isFile()</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isDir</span>(<span class="params">filepath</span>)</span>&#123;  <span class="comment">//判断是否是文件夹 Boolean</span></span><br><span class="line">    <span class="keyword">let</span> stat = fs.statSync(filepath)</span><br><span class="line">    <span class="keyword">return</span> stat.isDirectory()</span><br><span class="line">&#125; </span><br></pre></td></tr></table></figure>

<p>递归遍历所有文件夹和文件</p>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blogs/2022/06/20/NodeJS%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E4%B8%8E%E4%B8%8B%E8%BD%BD/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/06/14/vite-vue3%E6%9E%84%E5%BB%BA%E9%A1%B9%E7%9B%AE/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/06/14/vite-vue3%E6%9E%84%E5%BB%BA%E9%A1%B9%E7%9B%AE/" itemprop="url">vite+vue3构建项目</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-06-14T22:47:52+08:00">
                2022-06-14
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/06/14/vite-vue3%E6%9E%84%E5%BB%BA%E9%A1%B9%E7%9B%AE/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/06/14/vite-vue3构建项目/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="vite-vue3构建项目"><a href="#vite-vue3构建项目" class="headerlink" title="vite+vue3构建项目"></a>vite+vue3构建项目</h1><p>1.初始化项目</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init @vitejs/app 项目名</span><br></pre></td></tr></table></figure>

<p>2.安装依赖</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install </span><br></pre></td></tr></table></figure>

<p>3.安装element-plus</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install element-plus --save</span><br></pre></td></tr></table></figure>

<p>4.配置elementUI</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//main.js</span></span><br><span class="line"><span class="keyword">import</span> &#123; createApp &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> ElementPlus <span class="keyword">from</span> <span class="string">&#x27;element-plus&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;element-plus/dist/index.css&#x27;</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = createApp(App)</span><br><span class="line"></span><br><span class="line">app.use(ElementPlus)</span><br><span class="line">app.mount(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>

<p>ts配置</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vite.config.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; defineConfig &#125; <span class="keyword">from</span> <span class="string">&#x27;vite&#x27;</span></span><br><span class="line"><span class="keyword">import</span> AutoImport <span class="keyword">from</span> <span class="string">&#x27;unplugin-auto-import/vite&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Components <span class="keyword">from</span> <span class="string">&#x27;unplugin-vue-components/vite&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; ElementPlusResolver &#125; <span class="keyword">from</span> <span class="string">&#x27;unplugin-vue-components/resolvers&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> defineConfig(&#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">    AutoImport(&#123;</span><br><span class="line">      <span class="attr">resolvers</span>: [ElementPlusResolver()],</span><br><span class="line">    &#125;),</span><br><span class="line">    Components(&#123;</span><br><span class="line">      <span class="attr">resolvers</span>: [ElementPlusResolver()],</span><br><span class="line">    &#125;),</span><br><span class="line">  ],</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/06/02/JS%E6%B5%85%E6%8B%B7%E8%B4%9D%E5%92%8C%E6%B7%B1%E6%8B%B7%E8%B4%9D%E7%9A%84%E5%AE%9E%E7%8E%B0/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/06/02/JS%E6%B5%85%E6%8B%B7%E8%B4%9D%E5%92%8C%E6%B7%B1%E6%8B%B7%E8%B4%9D%E7%9A%84%E5%AE%9E%E7%8E%B0/" itemprop="url">JS浅拷贝和深拷贝的实现</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-06-02T22:19:12+08:00">
                2022-06-02
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/06/02/JS%E6%B5%85%E6%8B%B7%E8%B4%9D%E5%92%8C%E6%B7%B1%E6%8B%B7%E8%B4%9D%E7%9A%84%E5%AE%9E%E7%8E%B0/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/06/02/JS浅拷贝和深拷贝的实现/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="JS浅拷贝和深拷贝的实现"><a href="#JS浅拷贝和深拷贝的实现" class="headerlink" title="JS浅拷贝和深拷贝的实现"></a>JS浅拷贝和深拷贝的实现</h1><h2 id="1-什么是深拷贝和浅拷贝"><a href="#1-什么是深拷贝和浅拷贝" class="headerlink" title="1.什么是深拷贝和浅拷贝"></a>1.什么是深拷贝和浅拷贝</h2><p>简单的说，就是对于一个对象，浅拷贝只是引用了地址，深拷贝是直接复制了一份。</p>
<p>举个简单的例子就是，把对象A赋值给对象B，此时修改B对象的属性 ，A对象会发生改变，这叫浅拷贝，深拷贝则修改对象B的属性值，对象A不会发生变化，彼此是独立的。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person = &#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;louchao&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>:<span class="number">20</span>,</span><br><span class="line">    <span class="attr">gender</span>:<span class="string">&quot;male&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&quot;person&quot;</span>,person);		<span class="comment">// person &#123; name: &#x27;louchao&#x27;, age: 20, gender: &#x27;male&#x27; &#125;</span></span><br><span class="line"><span class="keyword">let</span> person1 = person;</span><br><span class="line">person1.name = <span class="string">&quot;zhangsan&quot;</span>;</span><br><span class="line">person1.age = <span class="number">25</span>;</span><br><span class="line">person1.gender = <span class="string">&quot;famele&quot;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&quot;person1&quot;</span>,person1);		<span class="comment">//person1 &#123; name: &#x27;zhangsan&#x27;, age: 25, gender: &#x27;famele&#x27; &#125;</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&quot;person:&quot;</span>,person);		<span class="comment">// person: &#123; name: &#x27;zhangsan&#x27;, age: 25, gender: &#x27;famele&#x27; &#125;</span></span><br></pre></td></tr></table></figure>

<p>可以看出来，第一次打印的person是初始值，这是没问题的，当我们把person的值赋值给person1之后，修改person1的值，得到person1的值，但是我们打印原来的person对象的时候，发现person的值被修改了，改成了person1的内容。这是为何？</p>
<h2 id="2-浅拷贝"><a href="#2-浅拷贝" class="headerlink" title="2.浅拷贝"></a>2.浅拷贝</h2><p>如上的情况，就是浅拷贝。这就涉及到栈内存和堆内存了。首先我们都知道我们每次声明一个基本类型的变量，我们的变量都是放在栈内存中，而当我们声明一个引用型变量时，我们的变量实际上是存储在堆内存中，而栈内存只是存储了这个变量的地址。</p>

          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/06/01/JS%E5%B7%A5%E5%85%B7%E7%B1%BB/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/06/01/JS%E5%B7%A5%E5%85%B7%E7%B1%BB/" itemprop="url">JS工具类</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-06-01T21:40:06+08:00">
                2022-06-01
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/06/01/JS%E5%B7%A5%E5%85%B7%E7%B1%BB/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/06/01/JS工具类/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h2 id="1-格式化时间"><a href="#1-格式化时间" class="headerlink" title="1.格式化时间"></a>1.格式化时间</h2><p>输入一个标准时间 : <code>2022-06-01T13:43:26.044Z</code></p>
<p>输出：<code>2022-05-01 21:43:26</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 格式化时间</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="variable">date</span></span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@returns <span class="type">&#123;string&#125;</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">formatDateTime</span> (<span class="params">date</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> year = date.getFullYear();</span><br><span class="line">    <span class="keyword">let</span> month = date.getMonth();</span><br><span class="line">    month = month &lt; <span class="number">10</span> ? (<span class="string">&quot;0&quot;</span> + month) : month;</span><br><span class="line">    <span class="keyword">let</span> day = date.getDate();</span><br><span class="line">    day = day &lt; <span class="number">10</span> ? (<span class="string">&quot;0&quot;</span> + day) : day;</span><br><span class="line">    <span class="keyword">let</span> hours = date.getHours();</span><br><span class="line">    hours &lt; <span class="number">10</span> ? (<span class="string">&quot;0&quot;</span> + hours) : hours;</span><br><span class="line">    <span class="keyword">let</span> minute = date.getMinutes();</span><br><span class="line">    minute = minute &lt; <span class="number">10</span> ? (<span class="string">&quot;0&quot;</span> + minute) : minute;</span><br><span class="line">    <span class="keyword">let</span> second = date.getSeconds();</span><br><span class="line">    second = second &lt; <span class="number">10</span> ? (<span class="string">&quot;0&quot;</span> + second) : second;</span><br><span class="line">    <span class="keyword">return</span> year + <span class="string">&quot;-&quot;</span> + month + <span class="string">&quot;-&quot;</span> + day + <span class="string">&quot; &quot;</span> + hours + <span class="string">&quot;:&quot;</span> + minute + <span class="string">&quot;:&quot;</span> + second;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="2-查找数组里面指定元素的下标"><a href="#2-查找数组里面指定元素的下标" class="headerlink" title="2.查找数组里面指定元素的下标"></a>2.查找数组里面指定元素的下标</h2><p>输入：一个数组，数组 <code>[&quot;zhang&quot;,&quot;san&quot;,&quot;li&quot;,&quot;si&quot;,&quot;zhao&quot;,&quot;qian&quot;,&quot;sun&quot;],目标元素 &quot;zhao&quot;</code></p>
<p>输出：数组的下标：<code>4</code></p>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blogs/2022/06/01/JS%E5%B7%A5%E5%85%B7%E7%B1%BB/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/05/21/TypeScript%E7%BC%96%E8%AF%91%E6%89%93%E5%8C%85%E5%A4%84%E7%90%86/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/05/21/TypeScript%E7%BC%96%E8%AF%91%E6%89%93%E5%8C%85%E5%A4%84%E7%90%86/" itemprop="url">TypeScript编译打包处理</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-05-21T22:14:41+08:00">
                2022-05-21
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/05/21/TypeScript%E7%BC%96%E8%AF%91%E6%89%93%E5%8C%85%E5%A4%84%E7%90%86/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/05/21/TypeScript编译打包处理/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h1 id="TypeScript编译打包处理"><a href="#TypeScript编译打包处理" class="headerlink" title="TypeScript编译打包处理"></a>TypeScript编译打包处理</h1><h2 id="1-TypeScript介绍"><a href="#1-TypeScript介绍" class="headerlink" title="1.TypeScript介绍"></a>1.TypeScript介绍</h2><p>TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准（<a target="_blank" rel="noopener" href="https://www.runoob.com/w3cnote/es6-tutorial.html">ES6 教程</a>）</p>
<p>TypeScript 由微软开发的自由和开源的编程语言</p>
<p>TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上</p>
<p>从名字上来说，TypeScript最直观的感受就是多了类型，变量类型。</p>
<p>我们都知道，JavaScript是没有变量类型的，但是TS有，而且TS还有很多增强的功能，这对于大型项目的构建和维护，是非常重要的，而且Vue3全面支持TS，因此学习TS是必须的，加油加油。</p>
<h2 id="2-安装TypeScript"><a href="#2-安装TypeScript" class="headerlink" title="2.安装TypeScript"></a>2.安装TypeScript</h2><ul>
<li>命令行安装TypeScript</li>
</ul>
<p><code>npm install typescript -g</code></p>
<ul>
<li>首先编译ts代码成js</li>
</ul>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blogs/2022/05/21/TypeScript%E7%BC%96%E8%AF%91%E6%89%93%E5%8C%85%E5%A4%84%E7%90%86/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/05/02/nginx%E9%85%8D%E7%BD%AEssl%E4%B9%8B%E8%B8%A9%E5%9D%91%E7%B3%BB%E5%88%97/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/05/02/nginx%E9%85%8D%E7%BD%AEssl%E4%B9%8B%E8%B8%A9%E5%9D%91%E7%B3%BB%E5%88%97/" itemprop="url">nginx配置ssl之踩坑系列</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-05-02T21:46:30+08:00">
                2022-05-02
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/05/02/nginx%E9%85%8D%E7%BD%AEssl%E4%B9%8B%E8%B8%A9%E5%9D%91%E7%B3%BB%E5%88%97/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/05/02/nginx配置ssl之踩坑系列/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h1 id="nginx配置ssl之踩坑系列"><a href="#nginx配置ssl之踩坑系列" class="headerlink" title="nginx配置ssl之踩坑系列"></a>nginx配置ssl之踩坑系列</h1><p>最近想弄个nginx来玩玩，代理我的几个服务</p>
<h2 id="1-安装"><a href="#1-安装" class="headerlink" title="1.安装"></a>1.安装</h2><p>nginx服务器的下载安装等等，网上一堆教程，也比较简单，这里不多做赘述</p>
<h2 id="2-为什么要用Nginx"><a href="#2-为什么要用Nginx" class="headerlink" title="2.为什么要用Nginx?"></a>2.为什么要用Nginx?</h2><p>nginx是一款可以正向代理和反向代理的服务器，甚至能支持50000+的并发。</p>
<p>用nginx来做<strong>反向代理，动静结合，负载均衡</strong>都很方便。</p>
<p>这些也有相当多的博客描述，这里不赘述。</p>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blogs/2022/05/02/nginx%E9%85%8D%E7%BD%AEssl%E4%B9%8B%E8%B8%A9%E5%9D%91%E7%B3%BB%E5%88%97/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/05/01/Express%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/05/01/Express%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96/" itemprop="url">Express代码优化</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-05-01T14:31:32+08:00">
                2022-05-01
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/05/01/Express%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/05/01/Express代码优化/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h1 id="Express代码优化（MyServer）"><a href="#Express代码优化（MyServer）" class="headerlink" title="Express代码优化（MyServer）"></a>Express代码优化（MyServer）</h1><h2 id="1-封装错误代码块"><a href="#1-封装错误代码块" class="headerlink" title="1.封装错误代码块"></a>1.封装错误代码块</h2><p>在所有路由之前，封装一个经常用到的错误的模板中间件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 响应错误的模板中间件</span></span><br><span class="line">app.use(<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="comment">// status默认值为1,表示失败</span></span><br><span class="line">  <span class="comment">// err是一个错误的对象</span></span><br><span class="line">  res.cc = <span class="function"><span class="keyword">function</span>(<span class="params">err,status = <span class="number">1</span></span>)</span>&#123;</span><br><span class="line">    res.send(&#123;</span><br><span class="line">      <span class="attr">status</span>:status,</span><br><span class="line">      <span class="attr">msg</span>:err <span class="keyword">instanceof</span> <span class="built_in">Error</span> ? err.message : err,</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;;</span><br><span class="line">  next();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>需要调用到的地方，直接使用req.cc()传入两个参数即可。</p>
<p>如下，假如在<code>/users/hello</code>这个接口中使用到req.cc，则</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// hello接口</span></span><br><span class="line">router.get(<span class="string">&#x27;/hello&#x27;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">typeof</span>(req.query))</span><br><span class="line">  <span class="keyword">if</span>(<span class="built_in">JSON</span>.stringify(req.query)==<span class="string">&quot;&#123;&#125;&quot;</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> res.cc(<span class="string">&quot;无参数&quot;</span>,<span class="number">1</span>);</span><br><span class="line">  &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    res.send(&#123;</span><br><span class="line">    <span class="attr">status</span>:<span class="number">200</span>,</span><br><span class="line">    <span class="attr">msg</span>:req.query,</span><br><span class="line">  &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blogs/2022/05/01/Express%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/04/29/express%E8%84%9A%E6%89%8B%E6%9E%B6%E4%B8%8E%E8%B7%AF%E7%94%B1%E6%A8%A1%E5%9D%97%E5%8C%96/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/04/29/express%E8%84%9A%E6%89%8B%E6%9E%B6%E4%B8%8E%E8%B7%AF%E7%94%B1%E6%A8%A1%E5%9D%97%E5%8C%96/" itemprop="url">express脚手架与路由模块化</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-04-29T21:06:48+08:00">
                2022-04-29
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/04/29/express%E8%84%9A%E6%89%8B%E6%9E%B6%E4%B8%8E%E8%B7%AF%E7%94%B1%E6%A8%A1%E5%9D%97%E5%8C%96/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/04/29/express脚手架与路由模块化/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h1 id="Express脚手架与路由模块化"><a href="#Express脚手架与路由模块化" class="headerlink" title="Express脚手架与路由模块化"></a>Express脚手架与路由模块化</h1><h2 id="1-Express脚手架"><a href="#1-Express脚手架" class="headerlink" title="1.Express脚手架"></a>1.Express脚手架</h2><ul>
<li>安装express脚手架，全局安装</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install express-generator -g</span><br></pre></td></tr></table></figure>

<ul>
<li>使用脚手架命令生成一个项目</li>
</ul>
<p><strong>假如我要生成一个叫<code>myServer</code>的项目</strong></p>
<p><code>express --view=ejs 项目包名</code></p>
<figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">express -<span class="literal">-view</span>=ejs myServer</span><br></pre></td></tr></table></figure>

<p>此时，就用命令行生成一个项目</p>


<p>接下来按照目录来</p>


<ul>
<li>进入到刚生成的项目里面</li>
</ul>
<figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">cd</span> myServer</span><br></pre></td></tr></table></figure>

<ul>
<li>安装所有项目依赖</li>
</ul>
<figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install</span><br></pre></td></tr></table></figure>



<ul>
<li>启动项目</li>
</ul>
<figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm <span class="built_in">start</span></span><br></pre></td></tr></table></figure>

<img src="/blogs/2022/04/29/express%E8%84%9A%E6%89%8B%E6%9E%B6%E4%B8%8E%E8%B7%AF%E7%94%B1%E6%A8%A1%E5%9D%97%E5%8C%96/pic4.png" class title="启动项目">

<p>项目默认运行在3000端口，浏览器输入<code>http://localhost:3000</code>查看</p>
<img src="/blogs/2022/04/29/express%E8%84%9A%E6%89%8B%E6%9E%B6%E4%B8%8E%E8%B7%AF%E7%94%B1%E6%A8%A1%E5%9D%97%E5%8C%96/pic5.png" class title="启动项目的首页">
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blogs/2022/04/29/express%E8%84%9A%E6%89%8B%E6%9E%B6%E4%B8%8E%E8%B7%AF%E7%94%B1%E6%A8%A1%E5%9D%97%E5%8C%96/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/04/28/Express%E4%B8%AD%E7%9A%84JWT%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blogs/2022/04/28/Express%E4%B8%AD%E7%9A%84JWT%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81/" itemprop="url">Express中的JWT身份认证</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-04-28T21:43:17+08:00">
                2022-04-28
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/04/28/Express%E4%B8%AD%E7%9A%84JWT%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/04/28/Express中的JWT身份认证/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h1 id="Express中的JWT身份认证"><a href="#Express中的JWT身份认证" class="headerlink" title="Express中的JWT身份认证"></a>Express中的JWT身份认证</h1><h2 id="1-JWT认证机制"><a href="#1-JWT认证机制" class="headerlink" title="1.JWT认证机制"></a>1.JWT认证机制</h2><ul>
<li>为什么要使用JWT?</li>
</ul>
<p>上一篇文章写得很详细，由于Session认证存在局限性，所以jwt应运而生。那session认证机制存在什么问题呢？</p>
<p>1.session需要配合cookie来实现，</p>
<p>2.由于cookie不支持跨域访问，所以涉及到前端跨域请求后端的时候，需要做很多额外的配置，才能实现跨域session认证。</p>
<ul>
<li>什么是JWT</li>
</ul>
<p>JWT(JSON WEB TOKEN)是目前最流行的跨域认证方案</p>
<ul>
<li>jwt认证的工作原理如下图所示：</li>
</ul>
<img src="/blogs/2022/04/28/Express%E4%B8%AD%E7%9A%84JWT%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81/pic1.png" class title="jwt认证的工作原理">

<p>用户的信息通过Token字符串的形式，保存咋客户端浏览器中，服务器通过还原Token字符串的形式来认证用户的身份。</p>
<h2 id="2-JWT的组成部分"><a href="#2-JWT的组成部分" class="headerlink" title="2.JWT的组成部分"></a>2.JWT的组成部分</h2><p>jwt通常由三部分组成，分别是Header（头部）,Payload（有效荷载）,Signature（签名）</p>
<p>示意图如下：</p>
<img src="/blogs/2022/04/28/Express%E4%B8%AD%E7%9A%84JWT%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81/pic2.png" class title="token的组成部分">

<p>其中：</p>
<ol>
<li>Payload部分才是真正的用户信息，他是用户信息经过加密之后生成的字符串</li>
<li>Header和Signature是安全性相关的部分，只是为了保证Token的安全性</li>
</ol>
<p>如下：</p>
<img src="/blogs/2022/04/28/Express%E4%B8%AD%E7%9A%84JWT%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81/pic3.png" class title="token的组成部分">

<h2 id="3-JWT的使用方式"><a href="#3-JWT的使用方式" class="headerlink" title="3.JWT的使用方式"></a>3.JWT的使用方式</h2><p>客户端收到服务器返回的JWT之后，通常会将他存储在localstorage或者sessionStorage中</p>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blogs/2022/04/28/Express%E4%B8%AD%E7%9A%84JWT%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
  </section>

  
  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/blogs/">&lt;i class&#x3D;&quot;fa fa-angle-left&quot;&gt;&lt;&#x2F;i&gt;</a><a class="page-number" href="/blogs/">1</a><span class="page-number current">2</span><a class="page-number" href="/blogs/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/blogs/page/5/">5</a><a class="extend next" rel="next" href="/blogs/page/3/">&lt;i class&#x3D;&quot;fa fa-angle-right&quot;&gt;&lt;&#x2F;i&gt;</a>
  </nav>



          </div>
          


          

        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      

      <section class="site-overview-wrap sidebar-panel sidebar-panel-active">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image"
                src="/blogs/images/cat.jpg"
                alt="" />
            
              <p class="site-author-name" itemprop="name"></p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/blogs/archives">
              
                  <span class="site-state-item-count">43</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/blogs/tags/index.html">
                  <span class="site-state-item-count">10</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://gitee.com/louchaoyy" target="_blank" title="Gitee">
                      
                        <i class="fa fa-fw fa-gitee"></i>Gitee</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="louchao@louchaoyy.cn" target="_blank" title="E-Mail">
                      
                        <i class="fa fa-fw fa-envelope"></i>E-Mail</a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      

      
        <div class="back-to-top">
          <i class="fa fa-arrow-up"></i>
          
        </div>
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">&copy; <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Chaoyxy</span>

  
</div>

<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<!--

  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Gemini</a> v5.1.3</div>
-->




        







        
      </div>
    </footer>

    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  
    <script type="text/javascript" src="/blogs/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/blogs/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/blogs/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/blogs/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/blogs/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/blogs/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  

  
  
    <script type="text/javascript" src="/blogs/lib/canvas-nest/canvas-nest.min.js"></script>
  


  


  <script type="text/javascript" src="/blogs/js/src/utils.js?v=5.1.3"></script>

  <script type="text/javascript" src="/blogs/js/src/motion.js?v=5.1.3"></script>



  
  


  <script type="text/javascript" src="/blogs/js/src/affix.js?v=5.1.3"></script>

  <script type="text/javascript" src="/blogs/js/src/schemes/pisces.js?v=5.1.3"></script>



  

  


  <script type="text/javascript" src="/blogs/js/src/bootstrap.js?v=5.1.3"></script>



  


  

    
      <script id="dsq-count-scr" src="https://Chaoyxy.disqus.com/count.js" async></script>
    

    

  




	





  














  





  

  

  

  
  

  

  

  

</body>
</html>
